<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Radio 单选框</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框</p>
	<p class="desc">要使用 Radio 组件，只需要设置v-model绑定变量， 选中意味着变量的值为相应 Radio label属性的值， label可以是String、Number 或 Boolean。</p>
	<div>
		<el-radio v-model="radio1" label="1" size="large">Option 1</el-radio>
		<el-radio v-model="radio1" label="2" size="large">Option 2</el-radio>
	</div>
	<div>
		<el-radio v-model="radio2" label="1">Option 1</el-radio>
		<el-radio v-model="radio2" label="2">Option 2</el-radio>
	</div>
	<div>
		<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
		<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
	</div>
	<div>
		<el-radio v-model="radio4" label="1" size="small" disabled>Option 1</el-radio>
		<el-radio v-model="radio4" label="2" size="small" disabled>Option 2</el-radio>
	</div>
	
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">disabled 属性可以用来控制单选框的禁用状态。</p>
	<p class="desc">你只需要为单选框设置 disabled 属性就能控制其禁用状态</p>
	<el-radio v-model="radio" disabled label="1">Option A</el-radio>
	<el-radio v-model="radio" disabled label="2">Option B</el-radio>
	
	<el-divider content-position="left">单选框组</el-divider><!-- =============================================================== -->
	<p class="desc">适用于在多个互斥的选项中选择的场景</p>
	<p class="desc">结合el-radio-group元素和子元素el-radio可以实现单选组， 为 el-radio-group 绑定 v-model，再为 每一个 el-radio 设置好 label 属性即可， 另外，还可以通过 change 事件来响应变化，它会传入一个参数 value 来表示改变之后的值。</p>
	<el-radio-group v-model="r3" @change="handleChange">
		<el-radio :label="3">Option A</el-radio>
		<el-radio :label="6">Option B</el-radio>
		<el-radio :label="9">Option C</el-radio>
	</el-radio-group>
	
	<el-divider content-position="left">按钮样式</el-divider><!-- =============================================================== -->
	<p class="desc">你可以让单选框看起来像一个按钮一样。</p>
	<p class="desc">只需要把 el-radio 元素换成 el-radio-button 元素即可， 此外，Element Plus 还提供了 size 属性用来控制单选框的大小。</p>
	<div>
		<el-radio-group v-model="radio1" size="large">
			<el-radio-button label="1">音乐</el-radio-button>
			<el-radio-button label="2">看书</el-radio-button>
			<el-radio-button label="3">旅游</el-radio-button>
			<el-radio-button label="4">追剧</el-radio-button>
		</el-radio-group>
	</div>
	<div style="margin-top: 20px">
		<el-radio-group v-model="radio2">
			<el-radio-button label="1">音乐</el-radio-button>
			<el-radio-button label="2">看书</el-radio-button>
			<el-radio-button label="3">旅游</el-radio-button>
			<el-radio-button label="4">追剧</el-radio-button>
		</el-radio-group>
	</div>
	<div style="margin-top: 20px">
		<el-radio-group v-model="radio3" size="small">
			<el-radio-button label="1">音乐</el-radio-button>
			<el-radio-button label="2">看书</el-radio-button>
			<el-radio-button label="3" disabled>旅游</el-radio-button>
			<el-radio-button label="4">追剧</el-radio-button>
		</el-radio-group>
	</div>
	<div style="margin-top: 20px">
		<el-radio-group v-model="radio4" disabled size="small">
			<el-radio-button label="1">音乐</el-radio-button>
			<el-radio-button label="2">看书</el-radio-button>
			<el-radio-button label="3">旅游</el-radio-button>
			<el-radio-button label="4">追剧</el-radio-button>
		</el-radio-group>
	</div>
	
	<el-divider content-position="left">带有边框</el-divider><!-- =============================================================== -->
	<p class="desc">设置 border 属性为 true 可以渲染为带有边框的单选框。</p>
	<div>
		<el-radio v-model="radio1" label="1" border size="large">Option A</el-radio>
		<el-radio v-model="radio1" label="2" border size="large">Option B</el-radio>
	</div>
	<div style="margin-top: 20px">
		<el-radio v-model="radio2" label="1" border>Option A</el-radio>
		<el-radio v-model="radio2" label="2" border>Option B</el-radio>
	</div>
	<div style="margin-top: 20px">
		<el-radio-group v-model="radio3" size="small">
			<el-radio label="1" border>Option A</el-radio>
			<el-radio label="2" border disabled>Option B</el-radio>
		</el-radio-group>
	</div>
	<div style="margin-top: 20px">
		<el-radio-group v-model="radio4" size="small" disabled>
			<el-radio label="1" border>Option A</el-radio>
			<el-radio label="2" border>Option B</el-radio>
		</el-radio-group>
	</div>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			radio1: '1',
			radio2: '1',
			radio3: '1',
			radio4: '1',
			radio: '2',
			r3: 3,
			
		}
	},
	methods:{
		handleChange(item){
			console.log(item)
		},
	},
}
const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");

</script>
</html>
